<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{overflow: hidden;}
        .box{width:250px;border: solid 1px black;float: left;text-align: center;}
        .box .img{width:90%;height:220px;}
        .box .name{line-height:20px;height:40px;overflow: hidden;}
        .box .oPrice{font-size: 12px;color: #999;text-decoration: line-through;}
        .box .nPrice{font-size: 20px;color: red;font-weight:bold;}
        .box .brand{width:60px;height:20px;}
        .box .tag{font-size:12px;}
        .box .addCart{margin-bottom: 20px;}
    </style>
</head>
<body>
    <div class="cont">
    </div>
</body>
<script>

    ;(async function(){
        // 先发起当前页的总数据请求，获取到商品的简要信息
        let allData = await ajax({
            url:"http://localhost:3000/getGoods",
            data:{
                num:3,
                index:10
            }
        })
        allData = JSON.parse(allData).data;

        // 根据第一个请求获取到的简要信息，中的某个主推商品的id
        // 发起第二次数据请求，请求主推商品的详情信息
        let oneData = await ajax({
            url:"http://localhost:3000/getGoods",
            data:{
                id: allData[0].goodsId
            }
        })
        oneData = JSON.parse(oneData).data;

        // 解析数据，处理数据
        allData[0] = oneData[0];
        let str = "";
        allData.forEach((val,idx)=>{
            if(idx === 0){
                str += `<div class="box">
                    <img class="img" src="${val.goodsImg}" alt="">
                    <p class="name">${val.goodsName}</p>
                    <p>原价：<span class="oPrice">${val.price}</span>，现价：<span class="nPrice">${(val.price * val.discount / 10).toFixed(2)}</span></p>
                    <p><img class="brand" src="${val.logo}" alt=""><span class="tag">${val.kind}</span></p>
                </div>`;
            }else{
                str += `<div class="box">
                        <img class="img" src="${val.goodsImg}" alt="">
                        <p class="name">${val.goodsName}</p>
                    </div>`;
            }
        })
        $(".cont").innerHTML = str;
    })();


    function $(selc){
        return document.querySelector(selc)
    }




    function ajax({url="", type="get", data={}, timeout=10000}={}){
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`;
        }
        url = type==="get" ? url+"?"+str.slice(0,-1) : url;

        const xhr = new XMLHttpRequest();
        xhr.open(type, url);
        xhr.timeout = timeout;
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(type==="post" ? str.slice(0,-1) : undefined);
        return new Promise((resolve, reject)=>{
            xhr.onload = function(){
                if(xhr.status === 200){
                    resolve(xhr.responseText);
                }else{
                    reject(xhr.status);
                }
            }
            xhr.ontimeout = function(){
                reject("timeout");
                xhr.abort();
            }
        })
    }
    
</script>
</html>